<template>
	<view class="gy-grid-item" @click.stop="selectFn">
		<view class="gy-grid-item-box" :class="{borderRight: borderRight, borderBottom: borderBottom}">
			<slot />
		</view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed
    } from "vue";

    const emits = defineEmits(["select"]);
    const props = defineProps({
    	data:{
    		type: [Number, String, Object]
    	}
    });

    const borderRight = ref(false);
    const borderBottom = ref(false);

	function selectFn(){
		emits("select", props.data)
	}

    defineExpose({
        borderRight,
        borderBottom
    });
</script>

<style lang="scss" scoped>
	.gy-grid-item {
	    width: 100%;
	    flex: 1;
	    position: relative;
	
	    .gy-grid-item-box {
	        position: absolute;
	        width: 100%;
	        height: 100%;
	        @include flex-center-center;
	        flex-direction: column;
	        overflow: hidden;
	        border-radius: var(--gy-border-radius-large);
	    }
	}
	.gy-grid-item:active{
	    .gy-grid-item-box {
	        background-color: #f7f7f7;
	        border-radius: var(--gy-border-radius-large);
	    }
	}
	.gy-grid-item:after {
	    content: "";
	    display: block;
	    width: 100%;
	    padding-bottom: 100%;
	}
	
	.gy-grid-item.borderBottom{
	    border-bottom: 1rpx solid var(--gy-border-color);
	}
	.gy-grid-item.borderRight{
	    border-right: 1rpx solid var(--gy-border-color);
	}
	
</style>